<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label">车辆种类</label>
            <div class="layui-input-block">
                <input type="text" name="mileage" class="layui-input" disabled value="转租车辆">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">标题描述</label>
            <div class="layui-input-block">
                <input type="text" name="titlt" class="layui-input"  placeholder="请输入标题描述" value="">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">品牌首字母</label>
            <div class="layui-input-block">
                <select name="bfirstletter" class="layui-input" lay-filter="province">
                    <option value="0">请选择</option>
                    {volist name="carbrand" id="v"}
                        <option value="{$v.bfirstletter}">{$v.bfirstletter}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">品牌名</label>
            <div class="layui-input-block">
                <select name="vehicle_brand" class="layui-input" id="city" lay-filter="city">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车辆级别</label>
            <div class="layui-input-block">
                <select name="level" lay-verify="required" lay-filter="level" class="layui-input">
                    <option value="">--请选择--</option>
                    <option value="1" >轿车</option>
                    <option value="2" >SUV</option>
                    <option value="3" >MPV</option>
                    <option value="4" >越野</option>
                    <option value="5" >跑车</option>
                    <option value="6" >其他</option>
                </select>
            </div>
        </div>
        
    
        <div class="layui-form-item">
            <label class="layui-form-label">动力种类</label>
            <div class="layui-input-block">
                <select name="power_type" lay-verify="required" lay-filter="power_type" class="layui-input">
                    <option value="">--请选择--</option>
                    <option value="1">纯电</option>
                    <option value="2">混动</option>
                    <option value="3">燃油</option>
                </select>
            </div>
        </div>
  
        <div class="layui-form-item">
            <label class="layui-form-label">行驶里程</label>
            <div class="layui-input-block">
                <input type="text" name="mileage" class="layui-input"  placeholder="请输入行驶里程" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上牌时间</label>
            <div class="layui-input-block">
                <input type="text" name="registration_time" data-date="" lay-verify="required" data-date-type="date" readonly class="layui-input"  placeholder="请选择上牌时间" value="{$row.registration_time|default=''}">
            </div>
        </div> 
        <div class="layui-form-item">
            <label class="layui-form-label">车辆型号</label>
            <div class="layui-input-block">
                <input type="text" name="model" class="layui-input"  placeholder="请输入车辆型号" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">搭载排量</label>
            <div class="layui-input-block">
                <input type="text" name="equipped_withdisplacement" class="layui-input"  placeholder="请输入搭载排量" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车身颜色</label>
            <div class="layui-input-block">
                <input type="text" name="vehicle_color" class="layui-input"  placeholder="请输入车身颜色" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">车辆检测报告</label>
            <div class="layui-input-block">
                <input name="vehicle_detection" id="vehicle_detection" class="layui-input layui-col-xs6" readonly placeholder="请上传文件" value="">
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>上传文件
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">车辆主图</label>
            <div class="layui-input-block layuimini-upload">
                <input name="host_graphimg" class="layui-input layui-col-xs6" readonly  placeholder="请上传车辆主图" value="">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="host_graphimg" data-upload-number="more" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="host_graphimg"><i class="fa fa-upload"></i> 上传</a></span>
                </div>
                <tip>请上传车头照、左前45度、右前45°、车尾照、中控台全景、车辆名牌</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">车辆实拍</label>
            <div class="layui-input-block layuimini-upload">
                <input name="real_shootingimg" class="layui-input layui-col-xs6" readonly  placeholder="请上传车辆实拍" value="">
                <div class="layuimini-upload-btn">
                    <span><a class="layui-btn" data-upload="real_shootingimg" data-upload-number="more" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="real_shootingimg"><i class="fa fa-upload"></i> 上传</a></span>
                </div>
                <tip>请上传车辆细节</tip>
            </div>
        </div>
        
        <div class="layui-form-item" id="specForm">
            <div id="specList"></div>
            <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="addSpec">添加规格</button>
            </div>
            </div>
        </div>
        <div class="hr-line"></div>
        <div class="layui-form-item text-center">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
        </div>

    </form>
</div>
<script type="text/javascript">
    layui.use(['form','upload'], function(){
        var form = layui.form;
        var upload = layui.upload;
        $ = layui.$;
 
       //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: 'upload' //上传接口
            ,accept: 'file' // 允许上传的文件类型
            ,done: function(res){
                $('#vehicle_detection').val(res.src)
                //上传完毕回调
                layer.msg('上传成功');
            }
            ,error: function(){
                //请求异常回调
                layer.msg('上传失败');
            }
        });

        form.on('select(province)', function(data) {
                var majorid = data.value
                $.ajax({
                    url: '{:url("admin/Sublease/province")}',
                    type: 'post',
                    data: {
                        id: majorid
                    },
                    dataType: 'json',
                    success: function(data) {
                        $('#city').html(JSON.stringify(data));
                        form.render('select');
                    }
                })
        });
 
       
        
        //多规格节点添加
        var specIndex = 0;
        $("#addSpec").click(function(){
            specIndex++;
            var specHtml = '<div class="layui-col-md4" id="specItem_'+ specIndex +'" style="margin-top:15px;">' +
                            '<label class="layui-form-label">期数</label>' +
                            '<div class="layui-input-block">' +
                            '<input type="text" name="spec_value[' + specIndex + '][number_ofperiods]" required  placeholder="请输入期数" autocomplete="off" class="layui-input">' +
                            '</div>' +
                        '</div>' +
                        '<div class="layui-col-md4" style="margin-top:15px;">' +
                            '<label class="layui-form-label">月租金额</label>' +
                            '<div class="layui-input-block">' +
                            '<input type="text" name="spec_value[' + specIndex + '][monthly_rentalamount]" required  placeholder="请输入月租金额" autocomplete="off" class="layui-input">' +
                            '</div>' +
                        '</div>'+
                        '<div class="layui-col-md4" style="margin-top:15px;">' +
                            '<a class="layui-btn layui-btn-danger " id="delSpec">删除规格</a>'+
                        '</div>';
            $("#specList").append(specHtml);
            form.render(); // 更新渲染
        });
        

    });
</script>